<el-dialog
  :title="title"
  :class="[$store.state.appPrefix + '-c-add-course-trainee-dialog', 'g-dialog']"
  width="70vw"
  :show-close="!isLoading"
  :close-on-click-modal="false"
  :visible.sync="dialogVisible"
  data-table-extra="220"
  v-loading="isLoading">
  <div class="g-table-layout">  
    <div class="g-table-top g-table-top-action__flex g-table-top-action__flex--br">
      <div class="g-table-top-action__left">
      </div>
      <div class="g-table-top-action__right">
        <el-search
          size="small"
          v-model="filterForm.q"
          class="g-table-top-action__left--block g-table-top-action__left--row"
          isBasic
          @search="$search"
          @clear="() => {filterForm.q = ''; $search()}"
          placeholder="请输入姓名或账号查询">
        </el-search>
        
        <!-- v-if="!isGroup" -->
        <el-select
          size="small"
          class="g-table-top-action__left--block g-table-top-action__left--row"
          v-model="filterForm.userLable"
          placeholder="人员标签"
          clearable
          @change="$search">
          <el-option
            v-for="item in userLabels"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </div>
    </div>
    <el-table v-loading="isPageLoading" :height="tableHeight" :data="tableList">
      <el-table-column class-name="no-ellipsis" width="35">
        <template slot="header" slot-scope="scope">
          <el-checkbox v-model="isCheckAll" @change="$handleChangeCheckAll"></el-checkbox>
        </template>
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.checked" @change="$handleChangeChecked(scope.$index)"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column
        v-for="col in COL_INDEXS"
        :key="col.prop"
        :prop="col.interfaceParam"
        :label="col.label"
        show-overflow-tooltip
        v-if="!col.isGroup || isGroup"
        :min-width="120">
        <template slot-scope="scope">
          <span>{{scope.row[col.prop] | filterBlank}}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="g-table-bottom g-pagination"
      background
      :hide-on-single-page="true"
      :layout="PAGE_CONFIG.simpleLayout"
      :total="totalCount"
      :page-size="pageSize"
      :current-page.sync="pageNo"
      @current-change="$handlePageChange">
    </el-pagination>
  </div>
  <span slot="footer" class="dialog-footer">
    <div class="footer-filter"> 
      <template v-if="!isGroup">
        加入分组：    
        <el-select
          v-if="groupList.length > 0"
          :disabled="groupList.length <= 0"
          size="small"
          class="g-table-top-action__left--block g-table-top-action__left--row"
          v-model="groupId"
          placeholder="选择学员分组"
          clearable>
          <el-option
            v-for="item in groupList"
            :key="item.id"
            :label="item.groupName"
            :value="item.id">
          </el-option>
        </el-select>
        <span v-else class="desc">暂无分组</span>
      </template>
    </div>
    <div class="footer-action">
      <el-button :disabled="isLoading" @click="dialogVisible = false">取 消</el-button>
      <el-button :disabled="isLoading || selectStuData.length <= 0" type="primary" @click="$debounceSave">已选（{{selectStuData.length}}），确定</el-button>
    </div>
  </span>
</el-dialog>
